<template>
	<div class="row">
	  <div class="col-md-12">
		<header><h1>小微博客</h1></header>
	  </div>
	</div>
	<div class="row">
	  <div class="col-md-12">
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
		  <div class="container-fluid">
			<div class="navbar-header">
			  <a class="navbar-brand" href="#" onclick="location.href='List'">首页</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			  <ul class="nav navbar-nav">
				<li class="active"><a href="#" onclick="location.href='Attention'">关注的人<span class="sr-only">(current)</span></a></li>
				<li><a href="#" onclick="location.href='AddWeibo'">写微博</a></li>
			  </ul>
			  <form class="navbar-form navbar-left">
				<div class="form-group">
				  <input type="text" class="form-control" placeholder="标题文字">
				</div>
				<button type="submit" class="btn btn-default">搜索</button>
			  </form>
			  <ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
				  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的空间<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" @click="toLoginName(name)">我写的微博</a></li>
                                        <li><a href="#" @click="toMyComment()">我的评论</a></li>
                                        <li><a href="#" @click="toAttention()">我的关注</a></li>

                                    </ul>
				</li>
				<li><button type="button" class="btn btn-default navbar-btn">登陆</button></li>
			  </ul>
			</div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		<!-- END 导航栏 -->
	  </div>
	</div>
	<div class="row">
	  <div class="col-md-9 col-sm-12">
		<!-- 关注列表 -->
		<table class="table table-hover text-center">
		  <thead>
			<tr>
			  <th class="text-center">关注人</th>
			  <th class="text-center">操作</th>
			</tr>
		  </thead>
		  <tbody>
			<tr v-for="(attention, index) in attentionList" :key="index">
			  <td>{{ attention.attentionName }}</td>
			  <td>
				<button @click="confirmRemoveAttention(attention.attentionId)" class="btn btn-primary">取消关注</button>
				<a href="#" class="btn btn-primary" role="button">看博主</a>
			  </td>
			</tr>
		  </tbody>
		</table>
		<!-- END 关注列表 -->
		<!--分页-->
		<el-pagination 
		  background layout="prev, pager, next, total" 
		  :total="total"
		  :page-size="pagesize" 
		  style="margin-top: 20px" 
		  @current-change="currentChange">
		</el-pagination>
		<!--END分页-->
	  </div>
	  <div class="col-md-3 col-sm-12">
		<!-- 侧边栏内容，可以根据需要添加 -->
	  </div>
	</div>
	<div class="row">
	  <div class="col-md-12">
		<!-- 面板 -->
		<div class="panel panel-default" style="margin-top:10px">
		  <div class="panel-body text-center">
			aiweibo sulan.cn<br/>
			Designed by fan wu
		  </div>
		</div>
		<!-- END 面板 -->
	  </div>
	</div>
  </template>
  
  <script>
  import axios from 'axios';
  import { getSessionStorage } from '../common.js';
  
  export default {
	data() {
	  return {
		attentionList: [],
		name: getSessionStorage("user").loginName,
		currentPage: 1,
		totalPage: 1 // This will be dynamically updated based on API response
	  };
	},
	mounted() {
	  this.fetchAttentionList(this.currentPage);
	},
	methods: {
	  fetchAttentionList(pageNum) {
		const user = getSessionStorage('user');
		if (!user || !user.loginName) {
		  console.error('User loginName not found in sessionStorage');
		  return;
		}
  
		const apiUrl = `http://localhost:81/xw01/xw-attention/api/attention/getAttentionListByLoginName`;
		axios.get(apiUrl, {
		  params: {
			pageNum: pageNum,
			pageSize: 10,
			loginName: user.loginName
		  }
		}).then(response => {
		  if (response.data.code === 200) {
			this.attentionList = response.data.data.records;
			this.totalPage = response.data.data.pages;
			this.currentPage = pageNum;
		  } else {
			console.error('Failed to fetch attention list:', response.data.message);
		  }
		}).catch(error => {
		  console.error('Error fetching attention list:', error);
		});
	  },
	  confirmRemoveAttention(attentionId) {
		if (confirm("确定要取消关注该作者吗？")) {
		  this.removeAttention(attentionId);
		}
	  },
	  removeAttention(attentionId) {
		console.log("Attention ID:", attentionId);
		const apiUrl = `http://localhost:81/xw01/xw-attention/api/attention/removeAttention`;
		axios.post(apiUrl, null, {
		  params: {
			attentionId: attentionId
		  }
		}).then(response => {
		  if (response.data.code === 200) {
			alert("取消关注成功");
			this.fetchAttentionList(this.currentPage); // Refresh the list after removing attention
		  } else {
			alert("取消关注失败");
		  }
		}).catch(error => {
		  console.error('Error removing attention:', error);
		  alert("取消关注失败");
		});
	  }
	}
  };
  </script>
  
  <style>
  /* Add your custom styles here */
  </style>
  